<template>
    <!-- 右键菜单 -->
    {{ menus }}
    <div class="rightMenu" v-show="showMenu">
        <div v-for="(item, index) in menus" @click="item.fun" :key="index"  :class="['menu-item', { active: activeIndex === index }]">
            <div class="item" v-if="item.isShow">
                <div v-if="item.type === 'edit'">
                    <span class="iconfont icon-edit svg-1" ></span>
                    <span class="iconfont icon-a-edit svg-2" ></span>
                </div>
                <div v-if="item.type === 'add'">
                    <span class="iconfont icon-a-add svg-1" ></span>
                    <span class="iconfont icon-add svg-2" ></span>
                </div>
                <div v-if="item.type === 'addMore'">
                    <span class="iconfont icon-add-more svg-1" ></span>
                    <span class="iconfont icon-a-add-more svg-2" ></span>
                </div>
                <div v-if="item.type === 'del'">
                    <span class="iconfont icon-a-delete svg-1" ></span>
                    <span class="iconfont icon-delete svg-2" ></span>
                </div>
                <div v-if="item.type === 'collapse'">
                    <span class="iconfont icon-shrink svg-1" ></span>
                    <span class="iconfont icon-full-shrink svg-2" ></span>
                </div>
                <div v-if="['import', 'down'].includes(item.type)">
                    <span class="iconfont icon-a-upload svg-1" ></span>
                    <span class="iconfont icon-upload svg-2" ></span>
                </div>
                <div v-if="item.type === 'export'">
                    <span class="iconfont icon-export svg-1" ></span>
                    <span class="iconfont icon-a-export svg-2" ></span>
                </div>
                <div v-if="item.type === 'refresh'">
                    <span class="iconfont icon-a-refresh svg-1" ></span>
                    <span class="iconfont icon-refresh svg-2" ></span>
                </div>
                <div v-if="item.type === 'copy'" >
                    <span class="iconfont icon-a-copy svg-1" ></span>
                    <span class="iconfont icon-copy svg-2" ></span>
                </div>
                <div v-if="item.type === 'issue'" >
                    <span class="iconfont icon-a-release svg-1" ></span>
                    <span class="iconfont icon-release svg-2" ></span>
                </div>
                <div v-if="item.type === 'move'" >
                    <span class="iconfont icon-a-move svg-1" ></span>
                    <span class="iconfont icon-move svg-2" ></span>
                </div>
                <div v-if="item.type === 'view'" >
                    <span class="iconfont icon-a-view svg-1" ></span>
                    <span class="iconfont icon-view svg-2" ></span>
                </div>
                <div v-if="item.type === 'auth'" >
                    <span class="iconfont icon-a-auth svg-1" ></span>
                    <span class="iconfont icon-auth svg-2" ></span>
                </div>
                <div v-if="item.type === 'addFile'" >
                    <span class="iconfont icon-a-add-file svg-1" ></span>
                    <span class="iconfont icon-add-file svg-2" ></span>
                </div>
            </div>
            <span style="margin-left: 10px;" v-if="item.isShow" class="upload">
                <ComUploadMore v-if="item.type=='import'" :loading="uploadLoading" text="上传文件" @handleUpload="handleUpload" :multiple="true" accept=""  margin="0" >
                </ComUploadMore>
                <span v-else >{{ item.label }}</span>
            </span>
        </div>
    </div>
</template>

<script setup name="RightClickMenu" lang="ts">
// 接收菜单信息
const props = defineProps({
    menus: { type: Array, default: ()=>[] }
})
const showMenu = ref(false);
// 关闭菜单
function close() {
    showMenu.value = false
}
const activeIndex = ref(null)
// 打开菜单和显示位置
function open(event, info) {
    event.preventDefault();
    // 先关闭
  showMenu.value = false;
    // 页面高度
    let pageHeight = document.documentElement.scrollHeight ;
    let pageWidth = document.documentElement.scrollWidth ;
    // 显示位置
    let menu = document.querySelector('.rightMenu');
    if (pageHeight -event.clientY < 200 ) {
      // menu.style.top = pageHeight + 'px'
      menu.style.top=null
      menu.style.bottom = (pageHeight - event.clientY )+ 'px';
    } else {
      menu.style.top = event.clientY + 'px';
      menu.style.bottom=null
    }
    
    if (pageWidth-event.clientX < 300) {
      menu.style.right = (pageWidth - event.clientX )+ 'px';
      menu.style.left = null
        
    } else {
      menu.style.right=null
      menu.style.left = event.clientX+5 + 'px';
    }
    // 显示
    showMenu.value = true;
    // console.log(menu,'menu');
    
    // console.log("点击高度为:", event.clientY);
    // 注册点击侦听事件
    document.addEventListener('click', close);
}
const emit=defineEmits(['handleUpload'])
const handleUpload = (e) => {
  emit('handleUpload',e)
}
// 暴露方法
defineExpose({ open, close });
</script>

<style scoped lang="scss">
.rightMenu {
    position: fixed;
    z-index: 99999999;
    cursor: pointer;
    border: 1px solid #eee;
    box-shadow: 0 0.5em 1em 2px rgba(0, 0, 0, 0.1);
    color: #606266;
    font-size: 14px;
    background: #fff;
    min-width: 150px;
    min-height: 40px;
    .menu-item {
      margin: 5px 0;
      text-align: center;
      cursor: pointer;
      display: flex;
      align-items: center;
      font-size: 13px;
      &.active {
        color: red;
      }
      .item {
        padding: 0 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 32px;
        .upload {
          
        }
        .iconfont {
          font-size: 16px !important;
        }

        .svg-1 {
          fill: var(--top-header-color);
          color: var(--top-header-color);
        }
        .svg-2 {
          display: none;
        }
        :deep(svg) {
          width: 16px;
          fill: var(--top-header-color);
          // padding: 2px;
        }
      }
      .text {
        width: calc(100% - 36px);
        padding: 6px 0 6px 8px;
        text-align: left;
        position: relative;
        &-import{
          .import{
            :deep(.el-upload){
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              z-index: 9;
              opacity: 0;
            }
          }
        }
      }
      .del-active{
        color: #999;
      }
      &:hover {
        color: #165DFF;
        background: var(--top-header-hover-bg);
        
        .item {
          background: rgba(232, 237, 244, 1);
          .svg-1 {
            display: none;
          }
          .svg-2 {
            display: block;
          }
          :deep(svg) {
            fill: var(--common-tab-color);
            // background: var(--common-tab-color);
          }
        }
      }
      :deep(.arco-btn){
        display: inline;
      }
    }
}

:deep(.arco-btn-primary, .arco-btn-primary[type='button']){
  background-color: opacify($color: #FFFFFF, $amount: 0) ;
  text-align: left;
   color: #606266;
   width: 100px;
   &:hover {
    color: #165DFF;
      background: var(--top-header-hover-bg);
   }
}
:deep(.arco-btn-size-medium){
  padding: 0;
}
</style>
